<template>
  <v-card height="100%" flat>
    <v-toolbar class="rounded-t-lg" color="#626C84" height="40">
      <v-toolbar-title> Symptom </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-icon
            color="#fff"
            v-on="on"
            v-bind="attrs"
            class="pointer"
            @click="openAddItem"
          >
            mdi-plus
          </v-icon>
        </template>
        <span>Add Symptom</span>
      </v-tooltip>
      <!-- <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-icon
            v-on="on"
            v-bind="attrs"
            color="#fff"
            class="pointer ml-2 arrow-icon"
          >
            mdi-arrow-collapse
          </v-icon>
        </template>
        <span>shrink</span>
      </v-tooltip> -->
    </v-toolbar>
    <v-skeleton-loader
      v-if="loading"
      height="calc(100% - 40px)"
      tile
      type="list-item@20"
    ></v-skeleton-loader>
    <Table
      v-else
      @edit="openEditItem"
      @delete="openDeleteEditItem"
      :rounded="false"
      :loading="loading"
      :headers="symptomHeaders"
      :showHeaderAction="false"
      :items="symptomItems"
      addTooltip="Add Symptom"
      editTooltip="Edit Symptom"
      deleteTooltip="Delete Symptom"
      hide-default-footer
    >
    </Table>
    <Dialog
      @submit="save"
      width="480"
      :title="dialogTitle"
      :show-save="step !== 3"
      v-model="showDialog"
    >
      <v-card min-height="168">
        <AddEditSymptom
          v-if="step === 1 || step === 2"
          ref="addEditSymptom"
        ></AddEditSymptom>
        <DeleteSymptom
          v-else
          @delete="deleteSymptom"
          :item="selectedItem"
        ></DeleteSymptom>
      </v-card>
    </Dialog>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import AddEditSymptom from "@/components/Maintenance/Setting/ProblemType/AddEditSymptom.vue";
import DeleteSymptom from "@/components/Maintenance/Setting/ProblemType/DeleteSymptom.vue";
interface ISymptomItem {
  id: string;
  cate: string;
  description: string;
}
@Component({
  components: {
    Table,
    Dialog,
    AddEditSymptom,
    DeleteSymptom,
  },
})
export default class Symptom extends Vue {
  // 1.add 2.edit 2.delete
  step = -1;
  // dialog
  showDialog = false;
  dialogTitle = "";
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // symptom
  selectedItem: ISymptomItem | null = null;
  loading = false;
  symptomHeaders = [
    {
      text: "Item Cate",
      value: "cate",
    },
    {
      text: "Symptom Description",
      value: "description",
    },
    {
      text: "",
      value: "action",
      align: "end",
    },
  ];
  symptomItems: ISymptomItem[] = [];
  getItems() {
    this.loading = true;
    setTimeout(() => {
      this.symptomItems = [
        {
          id: "1",
          cate: "TT1",
          description: "System Flashing",
        },
        {
          id: "2",
          cate: "DN",
          description: "Failure Installing",
        },
      ];
      this.loading = false;
    }, 1500);
  }

  // action
  openAddItem() {
    this.step = 1;
    this.dialogTitle = "Add Symptom";
    this.$nextTick(() => {
      const addEditSymptomRef = this.$refs.addEditSymptom as AddEditSymptom;
      addEditSymptomRef.resetForm();
    });
    this.openDialog();
  }
  openEditItem(item: ISymptomItem) {
    this.step = 2;
    this.dialogTitle = "Edit Symptom";
    this.selectedItem = item;
    this.$nextTick(() => {
      const addEditSymptomRef = this.$refs.addEditSymptom as AddEditSymptom;
      addEditSymptomRef.resetForm();
      setTimeout(() => {
        addEditSymptomRef.setFormData(item);
      });
    });
    this.openDialog();
  }
  openDeleteEditItem(item: ISymptomItem) {
    this.step = 3;
    this.dialogTitle = "Delete Symptom";
    this.selectedItem = item;
    this.openDialog();
  }

  async save() {
    const addEditSymptomRef = this.$refs.addEditSymptom as AddEditSymptom;
    const result = await addEditSymptomRef.validateFormData();
    if (result) {
      if (this.step === 1) {
        result.id = String(new Date().getTime());
        this.addSymptom(result as ISymptomItem);
      } else {
        this.editSymptom(
          this.selectedItem as ISymptomItem,
          result as ISymptomItem
        );
      }
      this.closeDialog();
    }
  }

  addSymptom(item: ISymptomItem) {
    this.symptomItems.push(item);
  }

  editSymptom(itemCate: ISymptomItem, item: ISymptomItem) {
    Object.assign(itemCate, item);
  }

  deleteSymptom(item: ISymptomItem) {
    const index = this.symptomItems.indexOf(item);
    this.symptomItems.splice(index, 1);
    this.closeDialog();
  }
  created() {
    this.getItems();
  }
}
</script>
<style lang="scss"></style>
